<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card" style="align-items: stretch; width: 600px; padding: 30px 50px">
        <h2>添加车辆</h2>
        <el-form label-width="80px" label-position="left">
            <el-form-item label-width="0px" style="margin-bottom: 0px">
                <div class="flex" style="align-items: stretch">
                    <el-form label-width="80px" label-position="left" style="width:340px">
                        <el-form-item label="型号: ">
                            <el-input v-model="car.model" placeholder="型号"></el-input>
                            <small style="color: red">{{errors.model}}</small>
                        </el-form-item>
                        <el-form-item label="品牌: ">
                            <el-select v-model="car.brand" style="width: 100%" placeholder="请选择品牌">
                                <el-option label="宝马" value="宝马"></el-option>
                                <el-option label="奔驰" value="奔驰"></el-option>
                                <el-option label="丰田" value="丰田"></el-option>
                                <el-option label="比亚迪" value="比亚迪"></el-option>
                                <el-option label="劳斯莱斯" value="劳斯莱斯"></el-option>
                                <el-option label="兰博基尼" value="兰博基尼"></el-option>
                            </el-select>
                            <small style="color: red">{{errors.brand}}</small>
                        </el-form-item>
                        <el-form-item label="租价: ">
                            <el-input v-model="car.price" placeholder="租价" type="number"></el-input>
                            <small style="color: red">{{errors.price}}</small>
                        </el-form-item>
                        <el-form-item label="状态: ">
                            <el-radio-group v-model="car.state">
                                <el-radio label="在库">在库</el-radio>
                                <el-radio label="出库">出库</el-radio>
                                <el-radio label="维修">维修</el-radio>
                            </el-radio-group>
                            <small style="color: red">{{errors.state}}</small>
                        </el-form-item>
                    </el-form>
                    <el-popover width="400" trigger="click" placement="top-end">
                        <div slot="reference">
                            <el-image slot="reference" :src="car.image" fit="cover" style="margin-right: 10px; width: 200px; height: 226px">
                                <span slot="error" v-model="car.image" class="fbox border1">提交封面图</span>
                            </el-image>
                            <small style="color: red">{{errors.image}}</small>
                        </div>

                        <el-upload action="txx/car/upload"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <el-input v-model="car.image" placeholder="粘贴封面图">
                                <el-button slot="append">上传封面图</el-button>
                            </el-input>
                        </el-upload>
                    </el-popover>
                </div>
            </el-form-item>
            <el-form-item label="轮播图: ">
                <el-upload
                        class="upload-demo"
                        action="txx/car/files"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture"
                        :multiple="true"
                        :on-success="handleSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!--                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                </el-upload>
            </el-form-item>
            <el-form-item label="介绍: ">
                <el-input v-model="car.intro" placeholder="介绍"></el-input>
                <small style="color: red">{{errors.intro}}</small>
            </el-form-item>
            <el-form-item style="text-align: right; margin-right: 10px">
                <el-button @click="addCar" type="primary">添加</el-button>
            </el-form-item>
        </el-form>
    </main>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            car:{brand:"",model:"",image:"",intro:"",price:"",state:"5"},
            errors:{brand:"",model:"",image:"",intro:"",price:"",state:""},
            fileList:[],
        },
        methods:{
            addCar(){
                this.errors={brand:"",model:"",image:"",intro:"",price:"",state:""};
                let p = new URLSearchParams();
                p.append("imagePath",this.fileList);
                Object.keys(this.car).forEach(key => {
                    p.append(`${key}`, this.car[key]);
                });
                axios.post("txx/car/addCar",p).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                    }else{
                        res.data.data.forEach(error=>{
                            this.errors[error.field] = error.defaultMessage;
                        })
                    }
                });
            },

            handleAvatarSuccess(res, file) {
                //this.imageUrl = URL.createObjectURL(file.raw);
                console.info(res);
                let path = "upload/" + res.data;
                this.car.image = path;
                console.log(path)
            },
            handleSuccess(res, file){
                console.info(res);
                let path = "upload/" + res.data;
                // this.car.image = path;
                this.fileList += path + ","
                console.log(this.fileList);

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/')==0;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return isJPG && isLt2M;
            },
            imageHandleAvatarSuccess(res, file) {
                //this.imageUrl = URL.createObjectURL(file.raw);
                console.info(res);
                let path = "upload/" + res.data;
                this.car.images.push(path);
            },
            imageBeforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/')==0;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return isJPG && isLt2M;
            },

            handleRemove(file) {
                let index = this.car.images.indexOf("upload/" + file.response.data);
                if(index != -1){
                    this.car.images.splice(index,1);
                }
                console.log(this.car.images)
            }
        }
    })
</script>
</body>
</html>
<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px
    }
</style>
